<template>
  <div class="page-shop" v-if="isDataReady">
    <PageHeader :shop="shop"/>
    <PageActivitiesDetail :shop="shop"/>
    <PageTabs :args="propsPageTabs"/>
    <transition name="tabContent">
      <PageFoodContent
        v-show="propsPageTabs.focusId === 'food' "
        :shop="shop"
        :shopId="shop.id"
        :categories="foodCategories"
      />
    </transition>
    <transition name="tabContent">
      <PageCommentContent v-show="propsPageTabs.focusId === 'comment'"/>
    </transition>
  </div>
</template>

<script>
import PageHeader from './components/PageHeader';
import PageActivitiesDetail from './components/PageActivitiesDetail';
import PageTabs from './components/PageTabs';
import PageFoodContent from './components/PageFoodContent';
import PageCommentContent from './components/PageCommentContent';
import { mapActions, mapState } from 'vuex';
import { getShopInfo, getShopFoodCategories } from '../../etc/datas';
import { dataAdapter } from '../../etc/methods';
import { imgBaseUrl } from '../../etc/config';
export default {
  data() {
    return {
      shop: {
        id: '',
        name: '店铺名称',
        avatar: '//elm.cangdu.org/img/164ad0b6a3917599.jpg',
        notice: '商家公告',
        activities: [],
        activitiesVisible: false,

        deliveryFee: 0,
        minOrderFee: 0,
        showActivitiesDetail() {
          this.activitiesVisible = true;
        },
        close() {
          this.activitiesVisible = false;
        }
      },
      foodCategories: [],
      propsPageTabs: {
        focusId: 'food',
        focus(focusId) {
          if (focusId !== this.focusId) {
            this.focusId = focusId;
          }
        }
      },

      isDataReady: false,
      dataLodings: 2
    };
  },

  beforeMount() {
    let shopId = (this.shop.id = this.$route.query.id);
    this.initPosition(this);

    getShopInfo(data => {
      this.dataAdapter(data, {
        shop: {
          name: true,
          avatar: ({ image_path }) => imgBaseUrl + image_path,
          notice: 'promotion_info',
          order_lead_time: true,
          activities: true,
          rating: true,
          deliveryFee: 'float_delivery_fee',
          minOrderFee: 'float_minimum_order_amount'
        }
      });
      if (--this.dataLodings === 0) {
        this.isDataReady = true;
      }
    }, shopId);

    getShopFoodCategories(data => {
      this.foodCategories = data;
      if (--this.dataLodings === 0) {
        this.isDataReady = true;
      }
    }, shopId);
  },

  mixins: [],
  methods: {
    dataAdapter,
    ...mapActions(['initPosition'])
  },
  computed: {
    ...mapState(['position'])
  },
  components: {
    PageHeader,
    PageActivitiesDetail,
    PageTabs,
    PageFoodContent,
    PageCommentContent
  }
};
</script>

<style lang="scss">
.page-shop {
  display: flex;
  flex-direction: column;
  position: absolute;
  right: 0;
  left: 0;
  height: 100%;

  .tabContent-enter-active,
  .tabContent-leave-active {
    transition: opacity 0.5s;
  }
  .tabContent-leave,
  .tabContent-leave-active {
    display: none;
  }
  .tabContent-enter,
  .tabContent-leave-active {
    opacity: 0;
  }
}
</style>